<template>
  <div class="content-wrap">
    <div class="canteen-content">
      <!-- <div class="top-panel"></div> -->
      <div class="bottom-panel">
        <cusTable border :loading="loading" :columns="columns" :height="tableHeight" :data="dataList" :bottomClass="['cus_page']">
          <template slot-scope="{ row }" slot="operation">
            <div class="flex">
              <Button type="primary" size="small"  v-permission="40" :style="{ padding: '0 8px' }" @click="reportedConfig(row)">
                配置
              </Button>
              <Button type="primary" size="small"  v-permission="30" :style="{ margin: '0 8px' }" @click="onEdit(row)">
                编辑
              </Button>
              <Button type="error" size="small"  v-permission="40" :style="{ padding: '0 8px' }" @click="onDelete(row)">
                删除
              </Button>
           
            </div>
          </template>
        </cusTable>
        <cus-page
            :data="pages"
            class="cus_page mt_20"
            @pageChange="handleSubmit()"
          ></cus-page>
      </div>
      <cus-modal v-model="editUnitData" ref="editModal" title="编辑" @onOk="modalSubmit" @on-visible-change="statusChange">
        <Form :label-width="120" :model="editUnitData" ref="formValidate" :rules="ruleValidate"  class="edit-canteen-form">
          <FormItem label="食堂编号"  prop="unitCode" :rules="{ required: true, message: '请输入食堂编号', trigger: 'blur' }">
            <Input maxlength="20" v-model="editUnitData.unitCode" disabled />
          </FormItem>
          <FormItem label="食堂名称" prop="unitName"  :rules="{ required: true, message: '请输入食堂名称', trigger: 'blur' }">
            <Input maxlength="20" v-model="editUnitData.unitName" />
          </FormItem>
          <FormItem label="食堂人数" prop="strength"  :rules="{ required: true,type: 'number', message: '请输入食堂人数', trigger: 'change' }">
            <InputNumber
              :min="1"
              :max="1000000"
              :precision="0"
              v-model="editUnitData.strength"
              placeholder="食堂人数"
              style="width: 100%"
            ></InputNumber>
          </FormItem>
          <FormItem label="地址" prop="address"  >
            <Input maxlength="50" v-model="editUnitData.address" />
          </FormItem>
          <FormItem label="联系人" prop="contactName" >
            <Input maxlength="20" v-model="editUnitData.contactName" />
          </FormItem>
          <FormItem label="联系电话" prop="contactPhone"  :rules="{ required: true, message: '请输入联系电话', trigger: 'blur' }">
            <Input maxlength="20" v-model="editUnitData.contactPhone" />
          </FormItem>
        </Form>
      </cus-modal>
    </div>
    <reportedConfigModal ref="reportedConfigModal" ></reportedConfigModal>
  </div>
  
</template>
<script>
import {
  getSubCanteenList,
  editUnit,
  deleteUnit,
} from "@/api/organ/organization";
import reportedConfigModal from './components/reportedConfigModal'
export default {
  components: {
    reportedConfigModal
  },
  data() {
    return {
      columns: [
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center",
        },
        {
          title: "食堂编码",
          key: "unitCode",
          align: "center",
        },
        {
          title: "食堂名称",
          key: "unitName",
          align: "center",
        },
        {
          title: "食堂人数",
          key: "strength",
          align: "center",
        },
        {
          title: "管理员账号",
          key: "adminUserLoginName",
          align: "center",
        },
        {
          title: "上级单位",
          key: "parentUnitName",
          align: "center",
        },
        {
          title: "联系人",
          key: "contactName",
          align: "center",
        },
        {
          title: "联系电话",
          key: "contactPhone",
          align: "center",
        },
        {
           title: "区域",
           key: "kitchenAreaName",
           Width: 135,
           align: 'center'
        },
        {
          title: "地址",
          key: "address",
          align: "center",
        },
        {
          title: "操作",
          width: 250,
          fixed: "right",
          slot: "operation",
          align: "center",
        },
      ],
      tableHeight: 0,
      pages: {
        page: 1,
        pageSize: 20,
        pageTotal: 0,
      },
      ruleValidate: {},
      dataList: [],
      editUnitData: {
        unitCode: "",
        unitName: "",
        contactName: "",
        contactPhone: "",
        address: "",
        strength: 1,
      },
      loading: true,
    };
  },
  mounted() {
    this.getCateenList();
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 174; // 表格自适应高度
    }, 100);
    window.addEventListener("resize", this.tableHeightChange, true);
  },
  methods: {

    getCateenList() {
      this.loading = true;
      getSubCanteenList({
        currentPage: this.pages.page,
pageSize: this.pages.pageSize
      }).then((res) => {
        if (res.code == 1) {
          this.loading = false;
          this.dataList = res.data.list;
          this.pages.pageTotal = res.data.total
        }
      });
    },
        // 分页改变
        handleSubmit() {

      this.getCateenList();
    },
    // 上报配置按钮点击
    reportedConfig(row) {
      this.$refs['reportedConfigModal'].show(row)
    },
    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 174; // 表格自适应高度
      }, 100);
    },
    statusChange(data) {
      if (!data) {
        this.$refs.formValidate.resetFields();
        this.editUnitData.strength = 1
      }
    },
    onEdit(row, index) {
      this.$refs.editModal.show = true;
      let { unitCode, unitName, contactName, contactPhone,strength,address } = row;
      this.editUnitData.unitCode = unitCode;
      this.editUnitData.unitName = unitName;
      this.editUnitData.contactName = contactName;
      this.editUnitData.contactPhone = contactPhone;
      this.editUnitData.strength = strength;
      this.editUnitData.address = address
    },
    modalSubmit() {
      this.$refs["formValidate"].validate((valid) => {
        if (valid) {
          editUnit(this.editUnitData).then((res) => {
            if (res.code == 1) {
              this.$refs.editModal.show = false;
              this.$Message.success("编辑成功");
              this.getCateenList();
            }
          });
        }
      })
    },
    onDelete(row, index) {
      this.$Modal.confirm({
        title: "删除",
        content: "<p>确定删除吗？</p>",
        onOk: () => {
          // this.$Message.info("Clicked ok");
          let params = {};
          params.unitCode = row.unitCode;
          this.deleteUnit(params);
        },
      });
    },
    deleteUnit(params) {
      deleteUnit(params).then((res) => {
        if (res.code == 1) {
          this.$Message.success("删除成功");
          this.getCateenList();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
